<!--
 - MineAdmin is committed to providing solutions for quickly building web applications
 - Please view the LICENSE file that was distributed with this source code,
 - For the full copyright and license information.
 - Thank you very much for using MineAdmin.
 -
 - @Author X.Mo<root@imoi.cn>
 - @Link   https://gitee.com/xmo/mineadmin-vue
-->
<template>
    <a-modal
        v-model:visible="visible"
        :footer="false"
        @cancel="close"
        draggable
    >
        <template #title> {{ $t('basics.daoru') }} </template>
        <a-upload
            draggable
            :custom-request="upload"
            :show-file-list="true"
            accept=".xlsx,.xls"
            :show-cancel-button="false"
            :limit="1"
            v-model:file-list="fileList"
        >
            <template #upload-button>
                <div class="rounded text-center p-7">
                    <div>
                        <div style="display: flex; justify-content: center">
                            <img
                                class="text-[0px] w-[56px] h-[56px] imp-img"
                                src="@/assets/images/ic_daoru.png"
                            />
                        </div>
                        <div class="text-red-600 font-bold">
                            {{ $t('basics.daoruexcel') }}
                        </div>
                        {{ $t('basics.wenjiantuoru') }}&nbsp;<span
                            style="
                                color: #3370ff;
                                margin-left: 10px;
                                margin-right: 10px;
                            "
                            >&nbsp;{{
                                $t('basics.dianjishangchuan')
                            }}&nbsp;</span
                        >&nbsp;{{ $t('basics.zhinengshangchuan') }}
                    </div>
                </div>
            </template>
        </a-upload>
        <div v-if="!fileList.length" class="mt-5 italic text-right">
            <a-link @click="sendDownload">{{ $t('basics.coazai') }}</a-link>
        </div>
        <div
            class="dialog-foot"
            style="text-align: end; margin-top: 10px"
            v-if="fileList.length"
        >
            <a-button
                type="primary"
                style="margin-right: 20px"
                @click="exporthandleOk"
                ><a-link :hoverable="false">{{
                    $t('basics.sure')
                }}</a-link></a-button
            >
            <a-button @click="concel">{{ $t('basics.concel') }}</a-button>
        </div>
    </a-modal>
</template>

<script setup>
import { ref } from 'vue';
import commonApi from '@/api/common';
import tool from '@/utils/tool';
import { Message } from '@arco-design/web-vue';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const visible = ref(false);
const props = defineProps({
    upLoadData: {
        type: Object,
        default: {
            url: '', // 上传路径
            params: {} // 参数
        }
    },
    downloadUrl: {
        type: String,
        default: ''
    }
});
const emit = defineEmits(['success']);

const open = () => (visible.value = true);
const close = () => (visible.value = false);
const fileList = ref([]);
const upload = (fileOption) => {
    // console.log(fileOption,'fileOption')
};
const exporthandleOk = () => {
    console.log('=============');
    Message.info(t('basics.wnjianshangchuan'));
    const dataForm = new FormData();
    const { url, params } = props.upLoadData;
    // console.log(params)
    // for (const key in params) {
    //     if (Object.hasOwnProperty.call(params, key)) {
    //         const element = params[key];
    //         dataForm.append(key, element);
    //     }
    // }
    // console.log(fileList.value)
    dataForm.append('file', fileList.value[0].file);
    dataForm.append('task_name', params.task_name);
    // console.log(dataForm)
    commonApi
        .importExcel('/TcardClient/task/import', dataForm)
        .then(async (res) => {
            res.success &&
                Message.success(res.message || t('basics.daoruchenggong'));
            emit('success');
            close();
        });
    // emit('success');
    // close();
};
const concel = () => {
    fileList.value = [];
    close();
};

const sendDownload = () => {
    Message.info(t('basics.qingqiuxiazai'));
    const url = props.downloadUrl || 'cloud/userTask/download';
    if (/^(http|https)/g.test(url)) {
        window.open(url);
    } else {
        commonApi.download(url).then((res) => {
            tool.download(res);
            Message.success(t('basics.qingqiuchenggong'));
        });
    }
};

defineExpose({ open, close });
</script>
<style lang="less" scoped>
::v-deep .arco-icon-hover::before {
    font-size: 20px;
}
::v-deep .arco-upload-icon-remove svg path {
    width: 2em !important;
    height: 2em;
    font-size: 20px;
}
::v-deep .arco-modal {
    background: @modal-bg-color;
}
::v-deep .arco-upload-list-item-content {
    //#333c4a
    background: @imp-input-bg-color;
}
::v-deep .arco-upload-list-item-name {
    //1d2129
    color: @imp-input-color;
}
::v-deep
    .arco-upload-list-item
    .arco-upload-progress:hover
    .arco-progress-circle-bg {
    cursor: pointer;
    stroke: @imp-close-color;
}
</style>
